<template>
  <div id='commodity_log'>
    <div class="search-box">
      <Row type="flex"
           justify="space-between">
        <Row type="flex"
             justify="start">
          <Col class="search-item"><span class="search-label">输入搜索：</span><Input placeholder="商品编码/商品名称"
                 v-model='searchName'></Input></Col>
          <Col class="search-item">
          <span class="search-label">操作人 ：</span>
          <Input placeholder="请输入"
                 v-model='opertor'></Input>
          </Col>
          <Col class="search-item">
          <span class="search-label">变更字段：</span>
          <!-- <Input placeholder="请输入" v-model='changeName'></Input> -->
          <Select v-model="searchObj.changeName"
                  @on-change="search"
                  style="width:180px"
                  placeholder='请选择'>
            <Option v-for="item in changeNameList"
                    :value="item"
                    :key="item">{{ item }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
        <Row type="flex"
             justify="end"
             class="search-item-right">
          <Col class="search-item"
               style="padding-right:8px;">
          <Button v-if="exampleShow"
                  @click="exampleShow = !exampleShow">收起筛选
            <Icon type="ios-arrow-up" />
          </Button>
          <Button v-else
                  @click="exampleShow = !exampleShow">更多筛选
            <Icon type="ios-arrow-down" />
          </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example">
        <Row type="flex"
             justify="start"
             v-show="exampleShow">
          <Col class="search-item">
          <span class="search-label">修改日期：</span>
          <DatePicker format="yyyy-MM-dd HH:mm:ss"
                      :editable="false"
                      placement="bottom"
                      type="datetimerange"
                      placeholder="请选择"
                      v-model="dateTimes"
                      @on-change="selectLaunchTime">
          </DatePicker>
          </Col>
        </Row>
      </div>
      <Row type="flex"
           justify="end"
           style="margin-right: 24px;">
        <Col class="search-item">
        <Button class="search-btn"
                @click='exportLog'
                :disabled="tableData.length > 0 ? false: true">导出</Button>
        </Col>
      </Row>
    </div>
    <Table stripe
           class="table-list"
           :columns="columns"
           :data="tableData"
           :loading="loading"
           :height="tableHeight"></Table>
    <Row type='flex'
         justify="end"
         style='padding: 20px'>
      <Col>
      <Page :total="pageObj.total"
            :page-size='pageObj.pageSize'
            :current='pageObj.pageIndex'
            :page-size-opts='[20,50,100,200]'
            show-total
            show-sizer
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
import { formatDate } from '@/libs/tools'
import { getLogList, getUpdateList, exportLogList } from '@/api/commondity/index'
export default {
  name: 'commodity_log',
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.searchName !== to.query.id) {
        if (to.query.id) {
          vm.searchObj.searchName = to.query.id
          vm.searchName = to.query.id
          vm.dateTimes = []
          vm.createTime = ''
          vm.endTime = ''
        } else {
          vm.dateTimes = [
            formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00',
            formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
          ]
          vm.createTime = formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00'
          vm.endTime = formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
        }
        vm.opertor = ''
        vm.searchObj.opertor = ''
        vm.searchObj.changeName = ''
        vm.getData()
      }
    })
  },
  data () {
    return {
      skuId: '',
      exampleShow: false,
      loading: false,
      dateTimes: [
        formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00',
        formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
      ],
      createTime: formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00',
      endTime: formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00',
      searchName: '',
      opertor: '',
      searchObj: {
        searchName: '',
        opertor: '',
        changeName: ''
      },
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      changeNameList: [],
      tableData: [],
      columns: [
        {
          title: '商品编码',
          key: 'skuId'
        },
        {
          title: '商品名称',
          key: 'skuName'
        },
        {
          title: '变更字段',
          key: 'colName'
        },
        {
          title: '变更前',
          key: 'oldValue'
        },
        {
          title: '变更后',
          key: 'newValue'
        },
        {
          title: '操作时间',
          key: 'modifyTime'
        },
        {
          title: '操作人',
          key: 'modifierName'
        }
      ]
    }
  },
  methods: {
    exportLog () {
      exportLogList({
        merchantId: this.$store.state.user.merchantId,
        keyword: this.searchObj.searchName,
        startDate: this.dateTimes[0] ? this.dateTimes[0] : '',
        endDate: this.dateTimes[1] ? this.dateTimes[1] : '',
        changedField: this.searchObj.changeName,
        updaterName: this.searchObj.opertor,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        let url = res.data.data.full_url
        if (url) {
          window.location.href = url
        }
      })
    },
    search () {
      this.doSearch()
    },
    doSearch () {
      this.searchObj.searchName = this.searchName
      this.searchObj.opertor = this.opertor
      this.pageObj.pageIndex = 1
      this.getData()
    },
    reset () {
      this.searchName = this.$route.params.id
      this.searchObj.searchName = this.$route.params.id
      this.searchObj.opertor = ''
      this.opertor = ''
      this.searchObj.changeName = ''
      this.dateTimes = [
        formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00',
        formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
      ]
      this.createTime = formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00'
      this.endTime = formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.getData()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    selectLaunchTime (e) {
      this.dateTimes = e
      this.createTime = this.dateTimes[0]
      this.endTime = this.dateTimes[1]
    },
    getList () {
      getUpdateList({
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.changeNameList = result.data
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getData () {
      this.loading = true
      getLogList({
        merchantId: this.$store.state.user.merchantId,
        keyword: this.searchObj.searchName,
        startDate: this.createTime,
        endDate: this.endTime,
        changedField: this.searchObj.changeName,
        updaterName: this.searchObj.opertor,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          // 保留二位小数
          let resultData = result.data.list
          resultData.map(ele => {
            if (ele.colName === '销售价格') {
              Object.keys(ele).forEach(key => {
                if (key === 'oldValue' || key === 'newValue') {
                  let index = ele[key].indexOf('.')
                  ele[key] = ele[key].substr(0, index + 3)
                }
              })
            }
          })
          this.tableData = resultData
          this.pageObj.total = result.data.total
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.loading = false
        this.$Message.error(`${err}`)
      })
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.searchObj.searchName = this.$route.query.id
      this.searchName = this.$route.query.id
      this.dateTimes = []
      this.createTime = ''
      this.endTime = ''
    } else {
      this.dateTimes = [
        formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00',
        formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
      ]
      this.createTime = formatDate(new Date(new Date().getTime() - 86400000 * 1), 'yyyy-MM-dd') + ' 00:00:00'
      this.endTime = formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
    }
    this.getList()
    this.getData()
  }
}
</script>

<style lang="less">
#commodity_log {
  .ivu-date-picker {
    width: 280px;
    .ivu-date-picker-editor {
      width: 280px;
    }
  }
}
</style>
